<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { displayDate, info } from './data'
import { imagePath } from '@/libs/file-utils'
import { back } from '@/libs/common';

const img_bg = imagePath('quiz/luckday/detail/bg.jpg')
const img_logo = imagePath('quiz/luckday/detail/logo.png')
const img_title = imagePath('quiz/luckday/detail/title.png')
const btn_history = imagePath('quiz/luckday/detail/btn-history.png')
</script>

<template>
  <PageWrapper
    name="quiz-luckday-detail-info"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div class="calendar">
      <div
        class="logo"
        :style="{ backgroundImage: img_logo }"
      ></div>
      <div
        class="title"
        :style="{ backgroundImage: img_title }"
      ></div>

      <div class="date">{{ displayDate + info?.date + ' 农历' + info?.lunarDay }}</div>

      <div class="box">
        <div class="text">
          <div>星座：双子座</div>
          <div>月相：即望月</div>
        </div>
        <div class="text">星宿：斗宿(斗木獬)</div>
        <div class="text">
          <div>今日五行：</div>
          <div style="flex:1">年五行 覆灯火 月五行 杨柳木 日五行 钗钏金</div>
        </div>

        <div class="divider"></div>

        <div
          class="thing"
          style="margin-top: 25rpx;"
        >
          <div
            class="icon"
            style="background-color: #58AD6B"
          >宜</div>
          <div style="flex:1">{{ info?.suitable }}</div>
        </div>
        <div
          class="thing"
          style="margin-top: 48rpx;"
        >
          <div
            class="icon"
            style="background-color: #999"
          >忌</div>
          <div style="flex:1">{{ info?.suitable }}</div>
        </div>
      </div>
    </div>

    <div
      class="history"
      :style="{ backgroundImage: btn_history }"
      @click="back()"
    >返回日历</div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.calendar {
  position: relative;
  width: 686rpx;

  margin: 242rpx auto 0;

  background-color: #FFF1D6;
  border-radius: 48rpx;

  color: #8A5322;

  .logo {
    position: absolute;
    top: -240rpx;
    left: -40rpx;

    width: 295rpx;
    height: 295rpx;
  }

  .title {
    position: absolute;
    top: -154rpx;
    right: 10rpx;

    width: 307rpx;
    height: 78rpx;
  }

  .date {
    width: 100%;
    height: 100rpx;

    border-radius: 48rpx 48rpx 0 0;
    background-color: #FFCC81;

    font-size: 40rpx;
    line-height: 100rpx;
    text-align: center;
  }

  .box {
    width: 100%;

    box-sizing: border-box;
    padding: 36rpx 0 122rpx;

    border-radius: 0 0 48rpx 48rpx;
    background-color: #FFF1D6;

    .text {
      margin-bottom: 24rpx;

      box-sizing: border-box;
      padding: 0 48rpx;

      font-size: 40rpx;
      line-height: 58rpx;

      display: flex;
      justify-content: space-between;
    }

    .divider {
      width: 638rpx;
      height: 2rpx;

      margin: 0 auto;

      background-color: rgba(#000, .08);
    }

    .thing {
      box-sizing: border-box;
      padding: 0 42rpx;

      display: flex;
      align-items: center;

      font-size: 32rpx;
      line-height: 38rpx;

      .icon {
        width: 80rpx;
        height: 80rpx;

        margin-right: 16rpx;

        border-radius: 50%;

        color: #fff;
        font-size: 40rpx;
        line-height: 80rpx;
        text-align: center;
      }
    }
  }
}

.history {
  width: 365rpx;
  height: 131rpx;
  margin: 64rpx auto;

  color: #A23406;
  font-size: 48rpx;
  line-height: 124rpx;
  text-align: center;
}
</style>